<template>
  <a-row id="globalHeader" align="center" :wrap="false">
    <a-col flex="auto">
      <a-menu mode="horizontal" :selected-keys="selectedKeys" @menu-item-click="doMenuClick">
        <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
          <div class="titleBar">
            <img src="../assets/logo.png" class="logo"/>
            <div class="title">今瞧答答</div>
          </div>
        </a-menu-item>
        <a-menu-item v-for="item in visibleRoutes" :key="item.path">{{ item.name }}</a-menu-item>
      </a-menu>
    </a-col>
    <a-col flex="150px">
      <a-space v-if="loginUserStore.loginUser.id">
        <a-avatar class="avatar">
          <img alt="avatar" @click="handleClick" :src="loginUserStore.loginUser.userAvatar"/>
        </a-avatar>
        <a-drawer :width="340" title="用户编辑信息" :visible="visible" @cancel="handleCancel" unmountOnClose>
          <a-card>
            <a-form
                style="max-width: 480px;"
                label-align="left"
                auto-label-width
                :model="form"
                @submit="handleSubmit"
            >
              <PictureUploader :value="form.userAvatar" :onChange="(value: any) => (form.userAvatar = value)"
                               :biz="IMAGE_TYPE_ENUM.USER_AVATAR"/>
              <a-form-item field="userName" label="用户昵称">
                <a-input v-model="form.userName" placeholder="请输入用户昵称"/>
              </a-form-item>
              <a-form-item field="userProfile" label="用户简介">
                <a-input v-model="form.userProfile" placeholder="请输入简介"/>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" style="width: 120px">
                  提交
                </a-button>
              </a-form-item>
            </a-form>
          </a-card>
        </a-drawer>
        <div>
          {{ loginUserStore.loginUser.userName ?? "匿名用户" }}
        </div>
        <p class="loginOut" @click="loginOut">退出登录</p>
      </a-space>
      <div v-else>
        <a-button type="primary" href="/user/login">登录</a-button>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import {routes} from "@/router/routes";
import {useRouter} from "vue-router";
import {computed, defineProps, ref, withDefaults, watchEffect} from "vue";
import {useLoginUserStore} from "@/store/userStore";
import checkAccess from "@/access/checkAccess";
import {IMAGE_TYPE_ENUM} from "@/constant/app";
import message from "@arco-design/web-vue/es/message";
import API from "@/api";
import PictureUploader from "@/components/PictureUploader.vue";
import {getUserByIdUsingGet, updateMyUserUsingPost} from "@/api/userController";

/**
 * 表单信息
 */
const form = ref({
  userName: "",
  userAvatar: "",
  userProfile: ""
} as API.UserUpdateMyRequest);

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return "";
  }
});

/**
 * 加载数据
 */
const loadData = async () => {
  form.value.userName = loginUserStore.loginUser.userName;
  form.value.userAvatar = loginUserStore.loginUser.userAvatar;
  form.value.userProfile = loginUserStore.loginUser.userProfile;
};



/**
 * 提交表单
 * @param data
 */
const handleSubmit = async () => {
  const res = await updateMyUserUsingPost({
    id: props.id as any,
    ...form.value
  });
  if (res.data.code === 0) {
    message.success("修改成功");
  } else {
    message.error("操作失败，" + res.data.message);
  }
};

const visible = ref(false);

const loginUserStore = useLoginUserStore();

const router = useRouter();
// 当前选中的菜单项
const selectedKeys = ref(["/"]);
// 路由跳转时，自动更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

// 展示在菜单栏的路由数组
const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    // 根据权限过滤菜单
    if (!checkAccess(loginUserStore.loginUser, item.meta?.access as string)) {
      return false;
    }
    return true;
  });
});

// 点击菜单跳转到对应页面
const doMenuClick = (key: string) => {
  router.push({
    path: key
  });
}

// 退出登录
const loginOut = () => {
  // 清除用户信息
  loginUserStore.clearLoginUser()
  router.push('/');
}

const handleClick = () => {
  loadData();
  visible.value = true;
};

const handleOk = () => {
  visible.value = false;
  router.push('/');
};
const handleCancel = () => {
  visible.value = false;
  router.push('/');
}
</script>

<style scoped>
#globalHeader {

}

.titleBar {
  display: flex;
  align-items: center;
}

.title {
  color: black;
  margin-left: 16px;
  font-family: 华文新魏, 宋体, sans-serif;
  font-size: large;
}

.logo {
  height: 48px;
}

.loginOut, .avatar {
  cursor: pointer;
}
</style>